<template>
  <div class="search">
		<!-- 搜索框通用组件 -->
    <div class="search-box-wrapper">
      <search-box ref="searchBox" @query="onQueryChange" ></search-box>
    </div>
				<!-- 热门搜索 :refreshDelay="refreshDelay" -->
    <div ref="shortcutWrapper" class="shortcut-wrapper"   v-show="!query">
      <scroll  ref="shortcut" class="shortcut" :dataA="shortcut" :refreshDelay="refreshDelay">
				<div>
					<div class="hot-key" >
						<h1 class="title">热门搜索</h1>
						<ul>
							<li  @click="addQuery(item.k)" class="item" v-for="(item,index) in hotKey" :key="index">
							<span>{{item.k}}</span>
							</li>
						</ul>
					</div>
					<div class="search-history"  v-show="searchHistory.length" >
						<h1 class="title">
							<span class="text">搜索历史</span>
							<span @click="showConfirm" class="clear">
							<i class="icon-clear"></i>
							</span>
						</h1>
						<search-list :searches="searchHistory" @delete="deleteSearchHistory" @select="addQuery" ></search-list>
					</div>
					
        </div>
			
      </scroll>
    </div>
		<!-- 搜索列表-->
		<div class="search-result"  v-show="query" ref="searchResult">
      <suggest  @listScroll="blurInput" @select="saveSearch" ref="suggest" :query="query"></suggest>
    </div>
		<!-- 弹窗组件 -->
  <confirm ref="confirm" @confirm="clearSearchHistory" 
		 text="是否清空所有搜索历史" confirmBtnText="清空"></confirm>
    <router-view></router-view>
  </div>
</template>

<script >
  import SearchBox from 'base/search-box/search-box'
	import {getHotKey} from 'api/search'
  import SearchList from 'base/search-list/search-list'
  import Scroll from 'base/scroll/scroll'
  import Confirm from 'base/confirm/confirm'
  import Suggest from 'components/suggest/suggest'
  import {ERR_OK} from 'api/config'
  import {playlistMixin,searchMixin,playpop} from 'common/js/mixin'
  import {mapActions,mapMutations,mapGetters,} from 'vuex'
  export default {
    mixins: [playlistMixin,searchMixin],
		name:'search',
    data() {
      return {
				hotKey: [],
				songs: [],
				query: '',
				refreshDelay: 120,
				sosindex:1, //热门搜索 index
				disok:16 //热门搜索 index=16
      }
    },
		created() {
			this._getHotKey()
		},
    computed: {
			shortcut() {
       return this.hotKey.concat(this.searchHistory)
      },
			...mapGetters([
				'searchHistory'
			])
    },
    methods: {
			handlePlaylist(playlist) {
				const bottom = playlist.length > 0 ? '60px' : ''
				// 热门搜索 
				this.$refs.searchResult.style.bottom = bottom
				this.$refs.suggest.refresh()
				// 搜索列表
				this.$refs.shortcutWrapper.style.bottom = bottom
				this.$refs.shortcut.refresh()
			},
			_getHotKey(){ //热门歌曲前10首
				getHotKey().then((res)=>{
					if(res.code==ERR_OK){
						this.hotKey=res.data.hotkey.slice(0,10)
					}
				})
			},
			saveSearch() {//搜索历史
				this.saveSearchHistory(this.query)
			},
			// 显示弹窗
      showConfirm() {
        this.$refs.confirm.show()
      },
			...mapActions([
				'clearSearchHistory'
			])

    },
    watch: {
			query(newQuery) { //实时监听数值 滚动页面
        if (!newQuery) {
          setTimeout(() => {
            this.$refs.shortcut.refresh()
          }, 20)
        }
      },
		},
    components: {
      SearchBox,
      SearchList,
      Scroll,
      Confirm,
      Suggest
    },
  }
</script>


<style lang="scss" scoped >
.search{
    .search-box-wrapper{margin: 20px;}
    .shortcut-wrapper{
      position: fixed;
      top: 178px;
      bottom: 0;
      width: 100%;
      .shortcut{
        height: 100%;
        overflow: hidden;
        .hot-key{
          margin: 0 20px 20px 20px;
          .title{
            margin-bottom: 15px;
            font-size: $font-size-medium;
            color: $color-text-l;
					}
          .item{
            display: inline-block;
            padding: 5px 10px;
            margin: 0 20px 10px 0;
            border-radius: 6px;
            background: $color-highlight-background;
            font-size: $font-size-medium;
            color: $color-text-d;
						}
				}
        .search-history{
          position: relative;
          margin: 0 20px;
          .title{
            display: flex;
            align-items: center;
            height: 40px;
            font-size: $font-size-medium;
            color: $color-text-l;
            .text{flex: 1;}
            .clear{
              @include extend-click();
              .icon-clear{
                font-size: $font-size-medium;
                color: $color-text-d;
								}
						  }
						}
				}
			}
			
		
		}
		.search-result{
		  position: fixed;
		  width: 100%;
		  top: 178px;
		  bottom: 0;
		}
	}
</style>